<template>
   <div class="main">
      <div class="left">
         <div class="left-top">
             <!-- 头像 -->
            <el-row class="demo-avatar demo-basic">
              <el-col :span="12">
      <div class="sub-title">
      </div>
      <div class="demo-basic--circle">
        <div class="block "><el-avatar :size="50" :src="circleUrl" class="tx"></el-avatar></div>
        
      </div>
      </el-col> 
     </el-row> 
     <b>{{$store.state.userInfo.userorname}}</b>
     <p>{{$store.state.userInfo.roleName}}</p>
     <p>
       <el-upload
  class="uploadAvatar"
  action="http://chst.vip/students/uploadStuAvatar"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-remove="beforeRemove"
  multiple
  :limit="1"
  :on-exceed="handleExceed"
   
  :on-success="uploadSuccess"
  name="headimgurl"


  >
  <el-button size="small" type="primary">点击上传</el-button>
    <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
</el-upload>
     </p>
         </div>
         <div class="left-middle" > 
            
            <tr>
               <td>手机：</td>
               <td>16668889999</td>
               <td> <el-button class="btn" type="success" >修改收集</el-button></td>
            </tr>
           <tr>
              <td>邮箱：</td>
              <td>1959548515@qq.com</td>
                            <td> <el-button class="btn" type="primary" >绑定邮箱</el-button></td>

           </tr>
         </div>
         <div class="left-bottom">
              <el-button type="danger">危险按钮</el-button>
         </div>

      </div>
      <div class="right">

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
   <el-form-item label="账户" prop="username">
    <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
  </el-form-item>
   <el-form-item label="旧密码" prop="oldPassword">
    <el-input type="password" v-model="ruleForm.oldPassword" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="新密码" prop="newPassword">
    <el-input type="password" v-model="ruleForm.newPassword" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="确认密码" prop="checkPass">
    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
  </el-form-item>
  
  <el-form-item>
    <el-button type="primary" @click="submitForm()">提交</el-button>

  </el-form-item>
</el-form>
      </div>
   </div>
</template>
<script>
import {updatePassword,uploadAvatar1} from '@/api'

export default{
   data(){ 
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入新密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.newPassword) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
       headimgurl:"",
       uId:"",
         token:'',
          ruleForm: {
            username:'',
            oldPassword:'',
          newPassword: '',
          checkPass: ''
        },
          rules: {
         
          newPassword: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ]
          
        },
         circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
      }
      
   },
   mounted(){
 let token=localStorage.getItem('qf-token');
this.token=token;
   },
   methods:{
    uploadSuccess(r){
this.headimgurl=r.headimgurl
console.log(this.headimgurl)
this.headimgurl=this.headimgurl
console.log(this.$store.state.userInfo._id)
this.uId=this.$store.state.userInfo._id
console.log(this.token)
uploadAvatar1(this.headimgurl,this.uId,this.token)
.then(res=>{
console.log(res)
})
    },

     submitForm(){
           
  
        updatePassword(this.ruleForm,token)
.then(res=>{
  console.log(res);
})
     }
    
   }
}
</script>
<style>
.main{
   display: flex;
   height: 100%;
   background: rgb(236, 210, 214);
   border-radius: 10px;
}
.left{
   flex:4;
   height:100%;
   display:flex;
   flex-direction: column;
   border-right: 1px solid rgb(131, 126, 117);
}
.btn{
   text-align: right;
}
.left-top{
   flex:6;
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-top: 40px;
   font: 14px/30px "";
}
.left-middle{
   flex:2.5;
  padding: 40px 15px 0;
  font:14px/20px "";
   border-top:1px solid rgb(131, 126, 117);
  border-bottom:1px solid rgb(131, 126, 117);
   
}

.left-bottom{
   flex:1.5;
 padding-top: 30px;
 text-align: center;
}
.el-button--danger{
   width: 90%;
   height: 50%;
  
}
.right{
   flex:6;
   height:100%;
   margin-top: 100px;
}
</style>